<template>
  <div class="login">
    <div class="login-form">
      <div class="imgTitle">
        <img src="~@/assets/images/login/logoT.png" alt="xmcuLogo" />
      </div>
      <div class="title">
        <span class="en">XMCU</span><span class="zn">会议对接服务系统</span>
      </div>
      <div class="inputContent inputAcc">
        <img src="~@/assets/images/login/person.png" alt="" />
        <input
          type="text"
          placeholder="请输入账号"
          id="acc"
          autocomplete="off"
          v-model.trim="form.account"
          @keyup="inputKeyup"
        />
      </div>
      <div class="inputContent">
        <img class="img" src="~@/assets/images/login/pass.png" alt="" />
        <input
          type="password"
          placeholder="请输入密码"
          id="pas"
          autocomplete="off"
          v-model.trim="form.pwd"
          @keyup="inputKeyup"
        />
      </div>
      <button :disabled="btnDisabled" @click="loginEvt">{{ text }}</button>
    </div>
    <div class="logo">
      <img src="~@/assets/images/login/vision.png" alt="" /><span>V2.2.0</span>
    </div>
  </div>
</template>

<script>
import { loginApi } from "@/api/index.js";
import { parseQueryString } from "@/utils/public";
import "@/assets/css/login.less";
import md5 from "js-md5";
import Cookie from "js-cookie";
export default {
  name: "login",
  data() {
    return {
      form: {
        account: "",
        pwd: "",
      },
      text: "登录",
      btnDisabled: false,
    };
  },
  methods: {
    // 登录
    async loginEvt() {
      if (!this.form.account) {
        this.$message.info("请输入账号");
        return;
      }
      if (!this.form.pwd) {
        this.$message.info("请输入密码");
        return;
      }
      // 验证成功, 发送保存请求
      var errorPwd = this.form.pwd;
      this.form.pwd = md5(this.form.pwd);
      this.text = "登录中...";
      this.btnDisabled = true;
      console.log('点击');
      try {
        let res = await loginApi.login(this.form);
        if (res.success === true) {
          Cookie.set(
            "userInfo",
            String(md5(this.form.pwd + this.form.account))
          );
          this.text = "登录成功, 正在跳转";
          this.$router.push("/");
        } else {
          this.text = "登录";
          this.btnDisabled = false;
          this.form.pwd = errorPwd;
          this.$message.error("账户名或密码错误");
        }
      } catch (error) {
        this.form.pwd = errorPwd;
        this.btnDisabled = false;
        this.text = "登录";
      }
    },
    //自动登录
    async autoLogin(account, pwd) {
      try {
        let res = await loginApi.login({
          account,
          pwd,
        });
        if (res.success === true) {
          Cookie.set(
            "userInfo",
            String(md5(this.form.pwd + this.form.account))
          );
          sessionStorage.setItem(
            "userInfo",
            String(md5(this.form.pwd + this.form.account))
          );
          this.text = "登录成功, 正在跳转";
          this.$router.push("/");
        } else {
          this.text = "登录";
          this.btnDisabled = false;
          this.form.pwd = "";
          this.form.account = "";
          this.$message.error("账户名或密码错误");
        }
      } catch (error) {
        console.log(error, "zidong");
        this.form.pwd = "";
        this.form.account = "";
        this.btnDisabled = false;
        this.text = "登录";
      }
    },
    inputKeyup(e) {
      if (e.keyCode === 13) {
        this.loginEvt();
      }
    },
  },
  created() {
    let urlParams = parseQueryString(window.location.href);
    if (urlParams && urlParams.u) {
      let infoArr = urlParams.u.split("_");
      if (infoArr.length > 1) {
        let user = atob(decodeURIComponent(infoArr[0]));
        let pwd = infoArr[1];
        console.log(user, pwd);
        this.autoLogin(user, pwd);
      }
    }
  },
};
</script>

<style lang='less' scoped>
</style>
